<template>
  <view class="artworks-sort-container">
    <view class="artworks-sort-tips">
      <text>点击拖动进行排序~</text>
      <!-- #ifdef H5 -->
      <view class="back-btn" @click="goBack">
        <!-- <u-icon name="plus" color="#56d39d" size="24"></u-icon> -->
        <text class="huiju-iconfont huiju-icon-fanhui1"></text>
        <text>返回</text>
      </view>
      <!-- #endif -->
    </view>
    <block v-if="albumTopList && albumTopList.length > 0">
      <Title title="置顶专辑排序" :custom-style="{
        'marginBottom': '32rpx',
        'marginTop': '24rpx',
        'fontSize': '32rpx',
        'fontWeight': '700',
        'color': '#333'
      }" />
      <AlbumSort v-model="albumTopList" :is-album="isAlbum" @changeSort="changeSort"></AlbumSort>
    </block>
    <block v-if="albumList && albumList.length > 0">
      <Title title="专辑排序" :custom-style="{
        'marginBottom': '32rpx',
        'marginTop': '24rpx',
        'fontSize': '32rpx',
        'fontWeight': '700',
        'color': '#333'
      }" />
      <AlbumSort v-model="albumList" :is-album="isAlbum" @changeSort="changeSort"></AlbumSort>
    </block>
    <!-- 提示滑动滚动 -->
    <view class="scroll-tips">上下滑动右边侧栏</view>
  </view>
</template>

<script>
  import AlbumSort from '@/components/albumSort/albumSort';
  import Title from '@/components/title/title';
  import {
    batchAlbumSort,
    findAlbumByAuthorIdAndTypeId
  } from '@/api/artworks';
  export default {
    components: {
      AlbumSort,
      Title
    },
    data() {
      return {
        allalbumList: [], // 全部的列表
        albumList: [], // 普通排序
        albumTopList: [], // 置顶排序
        isAlbum: false,
        searchForm: {
          author_id: '',
          type: '',
          album_id: '',
          cate_id: ''
        }
      }
    },
    onLoad(options) {
      this.searchForm.author_id = options.author_id;
      this.searchForm.type = options.type;
      this.searchForm.cate_id = options.cate_id;
      if (options.album_id) {
        this.searchForm.album_id = options.album_id;
        this.isAlbum = true;
      }
      this.findAlbumByAuthorIdAndTypeId();
    },
    methods: {
      // 根据主页id和作品类型去获取作品列表
      findAlbumByAuthorIdAndTypeId() {
        uni.showToast({
          title: '加载中...',
          icon: 'loading',
        })
        findAlbumByAuthorIdAndTypeId(this.searchForm).then(result => {
          uni.hideToast();
          if (result && result.data) {
            let list = result.data;
            let albumList = [];
            let albumTopList = [];
            list.forEach(item => {
              if (item.is_top === '1') {
                albumTopList.push(item);
              } else {
                albumList.push(item);
              }
            })
            this.albumList = albumList;
            this.albumTopList = albumTopList;
            this.allalbumList = list;
          }
        })
      },

      // 改变排序
      changeSort(data) {
        uni.showToast({
          title: '加载中...',
          icon: 'loading',
          mask: true,
          duration: 10 * 1000
        })
        let sortList = []; // 排序列表
        let allalbumList = this.allalbumList; // 全部的作品列表
        const dataLength = data.length;
        // 获取排序的列表
        let changeSortList = [];
        if (this.searchForm.album_id) {
          changeSortList = data.map((item, index) => {
            return {
              id: item.id,
              album_sort: dataLength - index
            };
          });
        } else {
          changeSortList = data.map((item, index) => {
            return {
              id: item.id,
              sort: dataLength - index
            };
          });
        }
        allalbumList.forEach(item => {
          for (const iterator of changeSortList) {
            if (item.id === iterator.id) {
              if (this.searchForm.album_id) {
                item.album_sort = iterator.album_sort;
              } else {
                item.sort = iterator.sort;
              }
              sortList.push(item);
            }
          }
        })
        batchAlbumSort({ sortList, album_id: this.searchForm.album_id }).then(result => {
          uni.hideToast();
          if (result && result.code === 200) {
            this.findAlbumByAuthorIdAndTypeId();
          }
        }).catch(() => {
          uni.hideToast();
        })
      },

      // 返回
      goBack() {
        if (this.searchForm.album_id) {
          uni.navigateTo({
            url: `/pages/artworks/albumalbumList?author_id=${this.searchForm.author_id}&type=${this.searchForm.type}&album_id=${this.searchForm.album_id}`
          })
        } else {
          let pages = getCurrentPages();
          let pagesLength = pages.length;
          if (pagesLength > 1) {
            uni.navigateBack({
              delta: 1,
            })
          } else {
            uni.switchTab({ url: '/pages/creativeCenter/index' });
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .artworks-sort-container{
    padding: 80rpx 48rpx 120rpx 32rpx;

    .artworks-sort-tips{
      color: $uni-color-primary;
      background-color: #f3f7fb;
      padding: 24rpx 32rpx;
      font-size: 24rpx;
      border-radius: 8rpx;
      margin-bottom: 24rpx;
      width: 100%;
      /* #ifdef H5 */
      max-width: 375px;
      margin: auto;
      /* #endif */
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
    }
  }

  .scroll-tips{
    position: fixed;
    right: 0;
    writing-mode: vertical-lr;
    color: $uni-color-primary2;
    text-align: center;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 240rpx;
    font-size: 28rpx;
  }

  .back-btn{
    position: absolute;
    right: 32rpx;
    top: 0;
    bottom: 0;
    margin: auto;
    font-size: 26rpx;
    color: $uni-color-primary;
    background: #fff;
    padding: 0 24rpx;
    border-radius: 24rpx;
    height: 48rpx;
    line-height: 48rpx;
  }

</style>
